<template>
  <div>
    <h1>reactive 函数</h1>
    <ul>
      <li>{{ obj }}</li>
      <li>{{ obj.name }}</li>
      <li>
        <button @click="changeObj">修改reactive</button>
      </li>
      <li>{{ count }}</li>
      <li>
        <button @click="add">修改ref</button>
      </li>
      <li>{{ list }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  setup () {
    /**
     * reactive 函数 => 定义变量
     * 语法：const 变量名 = reactive(变量的默认值)
     * 说明❓：
     * 1. 只能定义复杂类型
     * 2. 不能=号赋值修改
     */
    const obj = reactive({
      name: '小红',
      age: 18
    })
    const changeObj = () => {
      // obj = { name: '小刚' }
      obj.name = '小刚'
    }

    /**
     * ref 函数 =》定义变量(推荐)
     * 语法：const 变量名 = ref(变量的默认值)
     * 说明❓：变量名.value
     */
    const count = ref(4)
    const list = ref([1, 2, 3])
    const add = () => {
      count.value++
      list.value.push(count.value)
    }
    return { obj, changeObj, count, add, list }
  }
}
</script>

<style lang="scss" scoped>
</style>
